<template>
  <div class="body">
    <div class="table_content">
      <div class="table_filtrate">
        <!-- <div class="tf_item">
          <div class="tag">时间</div>
          <el-date-picker
            v-model="tableParams.time_interval"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          />
        </div>

        <div class="tf_item">
          <div class="tag">机构ID|名称</div>
          <el-input
            v-model="tableParams.fuzzy_search_organization"
            class="input_fuzzy_search input"
            size="mini"
            placeholder="模糊搜索 机构ID|名称"
            clearable
          />
        </div>

        <div class="tf_item">
          <div class="tag">产品ID|名称</div>
          <el-input
            v-model="tableParams.fuzzy_search_product"
            class="input_fuzzy_search input"
            size="mini"
            placeholder="模糊搜索 产品ID|名称"
            clearable
          />
        </div>

        <div class="tf_item">
          <div class="tag">渠道ID</div>
          <el-input
            v-model="tableParams.channel_id"
            class="input"
            size="mini"
            placeholder="渠道ID"
            clearable
          />
        </div>

        <div class="tf_item">
          <div class="tag">推送状态</div>
          <el-select
            v-model="tableParams.matching_status"
            placeholder="推送状态"
            clearable
            size="mini"
            :filterable="true"
            class="inp"
            no-data-text="推送状态"
          >
            <el-option label="全部" value="all" />
            <el-option label="成功" :value="1" />
            <el-option label="失败" :value="0" />
          </el-select>
        </div>

        <div class="tf_item">
          <div class="tag">联系状态</div>
          <el-select
            v-model="tableParams.plan"
            placeholder="联系状态"
            clearable
            size="mini"
            :filterable="true"
            class="inp"
            no-data-text="联系状态"
          >
            <el-option label="全部" value="all" />
            <el-option
              v-for="(key, item) in productCluePlan"
              :key="item"
              :label="key"
              :value="item"
            />
          </el-select>
        </div>

        <div class="tf_item">
          <div class="tag">助贷类型</div>
          <el-select
            v-model="tableParams.loan_type"
            placeholder="助贷类型"
            clearable
            size="mini"
            :filterable="true"
            class="inp"
            no-data-text="推送状态"
          >
            <el-option label="全部" value="all" />
            <el-option label="全国" value="nationwide" />
            <el-option label="地区" value="region" />
          </el-select>
        </div>

        <div class="tf_item">
          <div class="tag">手机号</div>
          <el-input
            v-model="tableParams.mobile"
            class="input_fuzzy_search input"
            size="mini"
            placeholder="手机号"
            clearable
          />
        </div>
        <div class="tf_item">
          <div class="tag">地区</div>
          <el-cascader
            v-model="tableParams.region"
            size="mini"
            placeholder="请选择地区"
            class="inp"
            :props="{ multiple: false, checkStrictly: true }"
            :options="city_data"
            clearable
            filterable
          />
        </div>

        <div class="tf_item">
          <el-button type="primary" plain size="mini" @click="loadTableData"
            >搜索</el-button
          >
        </div> -->

        <div
          style="
            background: #fff;
            padding: 10px;
            background-color: #fff;
            padding: 10px;
            border-radius: 6px;
            margin: 5px;
            display: flex;
          "
        >
          <div>
            <div class="input_content">
              <div class="tag">时间</div>
              <el-date-picker
                class="input"
                v-model="tableParams.time_interval"
                size="mini"
                style="width: 260px"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
              />
            </div>

            <div class="input_content">
              <div class="tag">机构ID</div>
              <el-input
                v-model="tableParams.organization_id"
                class="input_fuzzy_search input"
                size="mini"
                placeholder="机构ID"
                clearable
              />
            </div>

            <div class="input_content">
              <div class="tag">产品ID</div>
              <el-input
                v-model="tableParams.product_id"
                class="input_fuzzy_search input"
                size="mini"
                placeholder="产品ID"
                clearable
              />
            </div>

            <div class="input_content">
              <div class="tag">渠道ID</div>
              <el-input
                v-model="tableParams.channel_id"
                class="input_fuzzy_search input"
                size="mini"
                placeholder="渠道ID"
                clearable
              />
            </div>

            <div class="input_content">
              <div class="tag">推送状态</div>
              <el-select
                class="inp"
                v-model="tableParams.matching_status"
                placeholder="推送状态"
                clearable
                size="mini"
                :filterable="true"
                no-data-text="推送状态"
              >
                <el-option label="全部" value="all" />
                <el-option label="成功" :value="1" />
                <el-option label="失败" :value="0" />
              </el-select>
            </div>

            <div class="input_content">
              <div class="tag">联系状态</div>
              <el-select
                v-model="tableParams.plan"
                placeholder="联系状态"
                clearable
                size="mini"
                :filterable="true"
                class="inp"
                no-data-text="联系状态"
              >
                <el-option label="全部" value="all" />
                <el-option
                  v-for="(key, item) in productCluePlan"
                  :key="item"
                  :label="key"
                  :value="item"
                />
              </el-select>
            </div>

            <div class="input_content">
              <div class="tag">助贷类型</div>
              <el-select
                v-model="tableParams.loan_type"
                placeholder="助贷类型"
                clearable
                size="mini"
                :filterable="true"
                class="inp"
                no-data-text="推送状态"
              >
                <el-option label="全部" value="all" />
                <el-option label="全国" value="nationwide" />
                <el-option label="地区" value="region" />
              </el-select>
            </div>

            <div class="input_content">
              <div class="tag">手机号</div>
              <el-input
                v-model="tableParams.mobile"
                class="input_fuzzy_search input"
                size="mini"
                placeholder="手机号"
                clearable
              />
            </div>

            <div class="input_content">
              <div class="tag">MD5手机号</div>
              <el-input
                v-model="tableParams.mobile_md"
                class="input_fuzzy_search input"
                size="mini"
                placeholder="MD5手机号"
                clearable
              />
            </div>
          </div>

          <div>
            <div class="input_content">
              <div class="tag">年龄区间</div>
              <el-input
                v-model="tableParams.age_min"
                class="input"
                style="width: 10px"
                size="mini"
                placeholder="1"
                clearable
              />
              <span style="margin: 0 5px 0px 10px">-</span>
              <el-input
                v-model="tableParams.age_max"
                class="input"
                style="width: 10px"
                size="mini"
                placeholder="100"
                clearable
              />
            </div>

            <div class="input_content">
              <div class="tag">城市</div>
              <el-cascader
                v-model="tableParams.region"
                size="mini"
                placeholder="请选择地区"
                class="inp"
                :props="{ multiple: false, checkStrictly: true }"
                :options="city_data"
                clearable
                filterable
              />
            </div>

            <div class="input_content">
              <div class="tag">芝麻分</div>
              <el-select
                v-model="tableParams.sesame_score"
                class="inp"
                size="mini"
                placeholder="请选择"
                clearable
              >
                <el-option key="0,600" label="600以下" value="0,600" />
                <el-option key="600,649" label="600-649" value="600,649" />
                <el-option key="650,699" label="650-699" value="650,699" />
                <el-option key="700,max" label="700以上" value="700,max" />
              </el-select>
            </div>

            <div class="input_content">
              <div class="tag">职业</div>
              <el-select
                v-model="tableParams.work"
                class="inp"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  key="civil_servant"
                  label="公务员"
                  value="civil_servant"
                />
                <el-option
                  key="public_institution"
                  label="事业单位"
                  value="public_institution"
                />
                <el-option
                  key="private_corporation"
                  label="民营"
                  value="private_corporation"
                />
                <el-option
                  key="state_corporation"
                  label="国企"
                  value="state_corporation"
                />
              </el-select>
            </div>

            <div class="input_content">
              <div class="tag">信用</div>
              <el-select
                v-model="tableParams.credit_status"
                class="inp"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option key="no_overdue" label="无逾期" value="no_overdue" />
                <el-option
                  key="current_overdue"
                  label="当前有逾期"
                  value="current_overdue"
                />
                <el-option
                  key="overdue_cleared"
                  label="逾期已结清"
                  value="overdue_cleared"
                />
              </el-select>
            </div>

            <div class="input_content">
              <div class="tag">花呗</div>
              <el-select
                v-model="tableParams.huabei_quota"
                class="inp"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option key="no" label="无" value="no" />
                <el-option key="0,5000" label="0-5000" value="0,5000" />
                <el-option key="5000,max" label="5000以上" value="5000,max" />
              </el-select>
            </div>

            <div class="input_content">
              <div class="tag">白条</div>
              <el-select
                v-model="tableParams.baitiao_quota"
                class="inp"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option key="no" label="无" value="no" />
                <el-option key="0,5000" label="0-5000" value="0,5000" />
                <el-option key="5000,max" label="5000以上" value="5000,max" />
              </el-select>
            </div>
          </div>

          <div style="flex: 1">
            <div class="input_content">
              <div class="tag">车</div>
              <el-radio-group v-model="tableParams.car" size="mini">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="1">有</el-radio-button>
                <el-radio-button label="0">无</el-radio-button>
              </el-radio-group>
            </div>

            <div class="input_content">
              <div class="tag">房</div>

              <el-radio-group v-model="tableParams.house" size="mini">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="1">有</el-radio-button>
                <el-radio-button label="0">无</el-radio-button>
              </el-radio-group>
            </div>

            <div class="input_content">
              <div class="tag">公积金</div>

              <el-radio-group
                v-model="tableParams.accumulation_fund"
                size="mini"
              >
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="1">有</el-radio-button>
                <el-radio-button label="0">无</el-radio-button>
              </el-radio-group>
            </div>

            <div class="input_content">
              <div class="tag">社保</div>

              <el-radio-group v-model="tableParams.social_security" size="mini">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="1">有</el-radio-button>
                <el-radio-button label="0">无</el-radio-button>
              </el-radio-group>
            </div>

            <div class="input_content">
              <div class="tag">保单</div>

              <el-radio-group v-model="tableParams.insurance" size="mini">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="1">有</el-radio-button>
                <el-radio-button label="0">无</el-radio-button>
              </el-radio-group>
            </div>

            <div class="input_content">
              <div class="tag">营业执照</div>

              <el-radio-group v-model="tableParams.business_owner" size="mini">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="1">有</el-radio-button>
                <el-radio-button label="0">无</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>

      <div class="table_operate">
        <div>
          <el-button type="primary" plain size="mini" @click="loadTableData"
            >搜索</el-button
          >
        </div>
      </div>

      <div class="table-card">
        <el-table
          id="table_id"
          v-loading="loading.table"
          class="table"
          :data="tableData.data"
          :row-class-name="tableRowClassName"
          :border="true"
          size="mini"
        >
          <el-table-column
            prop="mobile_md"
            label="md5"
            width="50"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.mobile_md }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100" />
          <el-table-column prop="mobile" label="手机号" width="100" />
          <el-table-column
            prop="name"
            label="身份证"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.identity }}
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="年龄" width="50">
            <template slot-scope="scope">
              {{ scope.row.age }}
            </template>
          </el-table-column>
          <el-table-column prop="work" label="职业" width="80" />
          <el-table-column prop="credit_status" label="信用" width="80" />

          <el-table-column prop="car" label="车产" width="50">
            <template slot-scope="scope"> {{ scope.row.car }}</template>
          </el-table-column>
          <el-table-column prop="house" label="房产" width="50">
            <template slot-scope="scope"> {{ scope.row.house }}</template>
          </el-table-column>

          <el-table-column prop="accumulation_fund" label="公积金" width="60">
            <template slot-scope="scope">
              {{ scope.row.accumulation_fund }}</template
            >
          </el-table-column>
          <el-table-column prop="social_security" label="社保" width="50">
            <template slot-scope="scope">
              {{ scope.row.social_security }}</template
            >
          </el-table-column>
          <el-table-column prop="insurance" label="保单" width="50">
            <template slot-scope="scope"> {{ scope.row.insurance }}</template>
          </el-table-column>
          <el-table-column prop="business_owner" label="营业执照" width="70">
            <template slot-scope="scope">
              {{ scope.row.business_owner }}</template
            >
          </el-table-column>
          <el-table-column prop="loan_money" label="需求金额" width="70">
            <template slot-scope="scope"> {{ scope.row.loan_money }}</template>
          </el-table-column>
          <el-table-column prop="sesame_score" label="芝麻分" width="70">
            <template slot-scope="scope">
              {{ scope.row.sesame_score }}</template
            >
          </el-table-column>
          <el-table-column prop="huabei_quota" label="花呗额度" width="80">
            <template slot-scope="scope">
              {{ scope.row.huabei_quota }}</template
            >
          </el-table-column>
          <el-table-column prop="baitiao_quota" label="白条额度" width="80">
            <template slot-scope="scope">
              {{ scope.row.baitiao_quota }}</template
            >
          </el-table-column>

          <el-table-column
            prop="region"
            label="城市"
            width="200"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span class="ellipsis" style="font-size: 12px">{{
                scope.row.province +
                "-" +
                scope.row.city +
                "-" +
                scope.row.district
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="助贷类型" width="70">
            <template slot-scope="scope">
              <span v-if="scope.row.product">
                {{ scope.row.product.loan_type }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="机构ID" width="60">
            <template slot-scope="scope">
              <span v-if="scope.row.product">
                {{ scope.row.product.o_id }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="产品ID" width="60">
            <template slot-scope="scope">
              <span v-if="scope.row.product">
                {{ scope.row.product.id }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            prop="product_real_price"
            label="产品价格"
            width="80"
          />

          <el-table-column prop="channel_id" label="渠道ID" width="60" />

          <el-table-column label="申请时间" width="140">
            <template slot-scope="scope">
              <div>{{ scope.row.createtime }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="matching_status"
            label="推送状态"
            width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span slot="reference" class="ellipsis custom-link">{{
                scope.row.matching_status
              }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="pc_plan" label="联系状态" width="100">
          </el-table-column>

          <!-- 
          <el-table-column prop="pc_remark" label="跟进内容" width="100">
          </el-table-column>

          <el-table-column prop="nickname" label="分配经理" width="100">
          </el-table-column> -->
        </el-table>

        <el-pagination
          v-if="!loading.table"
          class="table_pagination"
          :current-page="tableParams.page"
          :page-sizes="$pageSize"
          :page-size="tableParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleTableSizeChange"
          @current-change="handleTableCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiClueMatchingRecordListpage,
  apiConfigCurrent,
  apiChannelConciseAll,
} from "@/api/apiCommon";
import {
  getCity,
  getTableText,
  trCity,
  getConfigCurrent,
  cityAssignValueToList,
  assignValueToList,
} from "@/utils/appUtil";
import { getStorageSync } from "@/utils/storageUtils.js";
import { paramsDeleteNull } from "@/utils/common";
import { dateToTimestamp, formatTimestamp } from "@/utils/datetimeUtil";
export default {
  name: "Index",
  data() {
    return {
      tableParams: {
        page: 1,
        size: 15,
        time_interval: [
          new Date(new Date().setHours(0, 0, 0, 0)), // 今天的初始时间戳
          new Date(new Date().setHours(23, 59, 59, 999)), // 今天的结束时间戳
        ],

        region: [],
        organization_id: "",
        product_id: "",
        channel_id: "",
        matching_status: "all",
        plan: "all",
        loan_type: "all",
        mobile_md: "",
        age_min: "",
        age_max: "",
        age_max: "",
        sesame_score: "",
        work: "",
        credit_status: "",
        huabei_quota: "",
        baitiao_quota: "",
        car: "all",
        house: "all",
        accumulation_fund: "all",
        social_security: "all",
        insurance: "all",
        business_owner: "all",

        // fuzzy_search_product: "",
        // matching_status: "all",
        // mobile: "",
        // plan: "all",
        // loan_type: "all",
        // fuzzy_search_organization: "",
        // channel_id: "",

        // region: [],
        // sesame_score: "",
        // work: "",
        // credit_status: "",
        // huabei_quota: "",
        // baitiao_quota: "",
        // car: "all",
        // house: "all",
        // accumulation_fund: "all",
        // social_security: "all",
        // insurance: "all",
        // business_owner: "all",
      },
      tableData: {
        current_page: 1,
        data: [],
        last_page: 1,
        per_page: "15",
        total: 0,
      },
      productCluePlan: [],
      currentPage4: 1,
      business_select: [],
      organization_select: [],
      channel_select: [],
      city_data: [],
      fromViewCofing: {
        input_width: "120px",
        label_width: "120px",
      },
      loading: {
        dialog_create: false,
        table: false,
        form: false,
      },
    };
  },
  created() {
    const _this = this;
    // this.reqApiConfigProductCluePlan();
    // this.reqApiCity();
    this.reqGetConfigCurrent();
    // this.loadTableData();
  },
  methods: {
    formatTimestamp,
    getTableText,
    trCity,
    getPlanText(str) {
      const commonOptionData = getStorageSync("config_current", false);
      const obj = commonOptionData.product_clue_plan || {};
      return obj[str] || "";
    },
    getCreditStatusText(str) {
      const commonOptionData = getStorageSync("config_current", false);
      const objArr = commonOptionData.credit_status_v2 || [];
      const obj = {};
      objArr.forEach((item, index) => {
        obj[item.value] = item.label;
      });
      return obj[str] || "";
    },
    /** 获取全局配置 */
    reqGetConfigCurrent() {
      const _this = this;
      // apiChannelConciseAll().then((response) => {
      //   const result = response.data.list;
      //   _this.channel_select = result;
      // });
      getConfigCurrent().then((response) => {
        _this.city_data = response["city"];
        _this.productCluePlan = response["clue"]["product_clue_plan"];
      });
    },
    // 列表请求
    loadTableData() {
      const _this = this;
      _this.loading_start("table");
      apiClueMatchingRecordListpage(this.tableParams)
        .then((response) => {
          const result = response;
          var datalist = result.data.datalist;
          _this.tableData = datalist;
          _this.loading_end("table");
        })
        .catch(function (result) {
          _this.tableData.data = null;
          _this.loading_end("table");
        });
    },
    // 表格行状态
    tableRowClassName({ row, rowIndex }) {
      if (row["status"] == "stop") {
        return "discard-row";
      }
    },
    // 数量改变
    handleTableSizeChange(val) {
      this.tableParams.size = val;
      this.loadTableData();
    },
    // 页数改变
    handleTableCurrentChange(val) {
      this.tableParams.page = val;
      this.loadTableData();
      // console.log(`当前页: ${val}`);
    },
    // 部分状态改变
    tableUpdateItem(item) {
      var _this = this;
      var params = {
        id: item.id,
        push_status: item.push_status,
        entry_status: item.entry_status,
      };
      _this.loading_start("table");
      apiProductUpdatePart(params).then((response) => {
        _this.loading_end("table");
      });
    },
    // 加载开始...
    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true;
          setTimeout(() => {
            this.loading[key] = false;
          }, 5000);
        });
      } else {
        this.loading[keys] = true;
        setTimeout(() => {
          this.loading[keys] = false;
        }, 5000);
      }
    },
    // 加载结束...
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.$nextTick(() => {
            this.loading[key] = false;
          });
        });
      } else {
        this.$nextTick(() => {
          this.loading[keys] = false;
        });
      }
    },
  },
};
</script>

<style lang="scss">
.input_content {
  margin-bottom: 16px;

  .tag {
    width: 80px;
    text-align: right;
  }
  .input {
    margin-left: 10px;
  }
}
</style>
